<template>
    <div>
        <Header :left="true" leftText="返回" title="到货确认明细界面" />
        <van-row style="margin-top: 8px">
            <van-col>
                <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
            </van-col>
            <van-col class="message" style="margin-top: 5px">多媒体信息</van-col>
        </van-row>
        <div class="divMedia">
            <van-row style="margin-top: 10px">
                <van-col span="3" style="
              font-weight: bold;
              color: #a9a9a9;
              margin-left: 10px;
              margin-top: 8px;
            ">照片：</van-col>
                <van-col span="14" style="color: #a9a9a9">
                    <van-uploader v-show="true" v-model="photoList" :deletable="false" multiple :max-count="1" />
                </van-col>
            </van-row>
        </div>
        <van-row style="margin-top: 10px">
            <van-col>
                <van-image width="40" height="30" style="margin-left: -10px" src="assets/block.png" />
            </van-col>
            <van-col class="message" style="margin-top: 5px">填报信息</van-col>
        </van-row>
        <Field v-model="temporarytemployee.workertype" size="small" style="font-weight: bold; color: #a9a9a9" center
            colon label="用工类型" />
        <Field v-model="temporarytemployee.planworkdatetime" size="small" style="font-weight: bold; color: #a9a9a9"
            center colon label="用工日期" />
        <Field v-model="temporarytemployee.pshiftid" size="small" style="font-weight: bold; color: #a9a9a9" center colon
            label="班次" />
        <Field v-model="temporarytemployee.factworksused" size="small" style="font-weight: bold; color: #a9a9a9" center
            colon label="实际用工人数" />
        <Field v-model="temporarytemployee.workhour" size="small" style="font-weight: bold; color: #a9a9a9" center colon
            label="实际用工工时(小时)" />
        <Field v-model="temporarytemployee.creator" size="small" style="font-weight: bold; color: #a9a9a9" center colon
            label="创建人" />
        <Field v-model="temporarytemployee.createdatetime" size="small" style="font-weight: bold; color: #a9a9a9" center
            colon label="创建时间" />
        <Field v-model="temporarytemployee.checktor" size="small" style="font-weight: bold; color: #a9a9a9" center colon
            label="审核人" />
        <Field v-model="temporarytemployee.checkdatetime" size="small" style="font-weight: bold; color: #a9a9a9" center
            colon label="审核时间" />
    </div>
</template>
  <script>
import {
    Icon,
    Button,
    CellGroup,
    Cell,
    Field,
    Col,
    Row,
    Dialog,
    Image as VanImage,
    Divider,
    Checkbox,
    Pagination,
    Search,
    Sticky,
    Toast,
    Uploader,
    Loading,
} from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Search);
Vue.use(Sticky);
Vue.use(Uploader);
Vue.use(Loading);

import Header from "@/components/header.vue";
import { _httpClient } from "@/libs/api";

export default {
    name: "arrivalgoodsconfirmitem",
    components: {
        Button,
        Header,
        Icon,
        CellGroup,
        Cell,
        Field,
        Col,
        Row,
        Search,
        Sticky,
    },

    data() {
        return {
            id: "",
            temporarytemployee: {},
            screenWidth: 0,
            photoList: [
                //图片
            ],
        };
    },
    created: function () {
        let oldHight = api.winWidth;
        this.screenWidth = oldHight;
        this.id = api.pageParam.id;
        this.queryFileById(this.id);
    },
    methods: {
        //查询临时用工信息
        async queryFileById(id) {
            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "查询中...",
            });
            try {
                let res = await _httpClient.post(
                    _httpClient.getApiPrefix() +
                    "/app/manhourfact/confirmlabor/querynotaudititem",
                    {
                        body: { id: _this.id },
                    }
                );
                if (res.code === 200) {
                    if (res.rows.length > 0) {
                        //筛选信息
                        switch (res.rows[0].workertype) {
                            case "L001":
                                _this.temporarytemployee.workertype = "返工挑选";
                                break;
                            case "L002":
                                _this.temporarytemployee.workertype = "设备临时损坏或停机";
                                break;
                            case "L003":
                                _this.temporarytemployee.workertype = "临时性清洁工作";
                                break;
                            case "L004":
                                _this.temporarytemployee.workertype = "临时离场";
                                break;
                            case "L005":
                                _this.temporarytemployee.workertype = "其他";
                                break;
                        }
                        _this.temporarytemployee.planworkdatetime =
                            res.rows[0].planworkdatetime;
                        _this.temporarytemployee.pshiftid = res.rows[0].pshiftid;
                        _this.temporarytemployee.factworksused = res.rows[0].factworksused;
                        _this.temporarytemployee.workhour = res.rows[0].workhour;
                        _this.temporarytemployee.creator = res.rows[0].creator;
                        _this.temporarytemployee.createdatetime =
                            res.rows[0].createdatetime;
                        _this.temporarytemployee.checktor = res.rows[0].checktor;
                        _this.temporarytemployee.checkdatetime = res.rows[0].checkdatetime;
                        let picture = { url: res.rows[0].filesource };
                        let pictures = [];
                        pictures.push(picture);
                        _this.photoList = pictures
                        _this.$forceUpdate();
                    }
                    Toast.clear();
                } else {
                    Toast.fail(res.msg);
                }
            } catch (e) {
                Toast.clear();
                alert(JSON.stringify(e));
            }
        },
    },
};
</script>
  <style>
  body {
      background-color: White;
  }
  
  .clickbtn {
      width: 1;
      margin: 5px 10px;
      line-height: 45px;
      border: 1px #ccc dashed;
      text-align: center;
  }
  
  .buttonRight {
      position: fixed;
      margin-top: -40px;
      right: 10px;
      width: 88px;
      height: 40px;
      background-color: #1c6c8d;
      border-color: #1c6c8d;
  }
  
  .buttonLeft {
      position: fixed;
      bottom: 5px;
      right: 10px;
      width: 88px;
      height: 40px;
      background-color: #1c6c8d;
      border-color: #1c6c8d;
  }
  
  .message {
      font-size: 20px;
      margin-top: 0px;
      margin-left: -10px;
      font-weight: bold;
  }
  
  .divStyle {
      margin-left: 3px;
      margin-right: 3px;
  }
  
  .pagination {
      position: fixed;
      bottom: 15px;
      width: 300px;
      margin-left: 10%;
      color: rgb(0, 0, 255);
      text-align: center;
  }
  
  .divMedia {
      margin-top: 10px;
      height: 100px;
      border: solid #dcdcdc;
      margin-left: 5px;
      margin-right: 15px;
      border-top-width: 4px;
      border-left-width: 4px;
      border-right-width: 1px;
  }
  
  .buttonDown {
      position: fixed;
      right: 5px;
      bottom: 20px;
      width: 150px;
      height: 40px;
      font-size: 12px;
  }
  </style>
  